<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery带缩略图轮播效果</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
    <style>
        body{
            width:100%;
        }
    </style>
</head>

<body>
    <div class="banner">
        <div class="large_box">
            <ul>
                <li>
                    <img src="images/img1.jpg" width="530" height="350">
</li>
                <li>
                    <img src="images/img2.jpg" width="530" height="350">
</li>
                <li>
                    <img src="images/img3.jpg" width="530" height="350">
</li>
                <li>
                    <img src="images/img4.jpg" width="530" height="350">
</li>
                <li>
                    <img src="images/img5.jpg" width="530" height="350">
</li>
                <li>
                    <img src="images/img6.jpg" width="530" height="350">
</li>
            </ul>
        </div>
        <div class="small_box">
            <span class="btn left_btn"></span>
            <div class="small_list">
                <ul>
                    <li class="on">
                        <img src="images/thum1.jpg" width="110" height="73">
                        <div class="bun_bg"></div>
                    </li>
                    <li>
                        <img src="images/thum2.jpg" width="110" height="73">
                        <div class="bun_bg"></div>
                    </li>
                    <li>
                        <img src="images/thum3.jpg" width="110" height="73">
                        <div class="bun_bg"></div>
                    </li>
                    <li>
                        <img src="images/thum4.jpg" width="110" height="73">
                        <div class="bun_bg"></div>
                    </li>
                    <li>
                        <img src="images/thum5.jpg" width="110" height="73">
                        <div class="bun_bg"></div>
                    </li>
                    <li>
                        <img src="images/thum6.jpg" width="110" height="73">
                        <div class="bun_bg"></div>
                    </li>
                </ul>
            </div>
            <span class="btn right_btn"></span>
        </div>
    </div>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="carousel.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        /* 商品轮播图（带缩略图的轮播效果） */
        $(".banner").thumbnailImg({
            large_elem: ".large_box",
            small_elem: ".small_list",
            left_btn: ".left_btn",
            right_btn: ".right_btn"
        });
    });
    </script>
</body>

</html>